<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采购商品平均价格统计</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 引入 jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }

        #main {
            width: 100%;
            height: 600px; /* 设置容器高度 */
            margin-top: 20px; /* 顶部留出一些空间 */
        }
    </style>
</head>
<body>
<div id="main"></div>

<script>
    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading(); // 显示加载动画

    // 发送请求获取后端数据
    $.get('http://localhost:8089/stats/getavgpricebyproduct').done(function (res) {
        console.log('请求成功:', res);
        var data = res.data;

        // 准备 x 轴和 y 轴的数据
        var xAxisData = [];
        var seriesData = [];

        // 遍历后端返回的数据，填充 x 轴和 y 轴的数据
        for (var i = 0; i < data.length; i++) {
            var name = data[i].name;
            var count = data[i].count.toFixed(2); // 保留两位小数
            xAxisData.push(name);
            seriesData.push(count);
        }

        // 隐藏加载动画，渲染图表
        myChart.hideLoading();
        myChart.setOption({
            title: {
                text: '采购商品平均价格统计',
                left: 'center',
                top: 30, // 标题位置稍微下移
                textStyle: {
                    color: '#333',
                    fontSize: 24,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: 100, // 调整图表与顶部标题的距离
                bottom: 60, // 调整图表与底部的距离，留出足够空间显示 x 轴标签
                left: 50, // 调整图表与左边界的距离
                right: 50 // 调整图表与右边界的距离
            },
            xAxis: {
                type: 'category',
                data: xAxisData,
                axisLabel: {
                    interval: 0,
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value',
                name: '平均价格（元）',
                axisLabel: {
                    formatter: '{value} 元' // y 轴数值格式化
                }
            },
            series: [{
                type: 'bar',
                data: seriesData,
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c} 元' // 柱状图上显示具体数值
                }
            }]
        });
    }).fail(function (xhr, status, error) {
        console.error('请求失败:', status, error);
        myChart.hideLoading();
    });
</script>
</body>
</html>
